/**
 * 修改空车重量 - 模块
 */

import { ConfigProvider, Form, Input, message, Modal, Table } from "antd"
import { FC, useCallback, useEffect, useState } from "react"
import { getEmptyDetail, getUpdateEmpty, IEmptyDetailType, ISelectListType } from "../../../api"
import { ColumnsType } from "antd/es/table"
import {DownOutlined, UpOutlined} from "@ant-design/icons"
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider"
const ChangeWeight: FC<{
    openShow: boolean,
    handleCallBack: () => void
    objData?: ISelectListType
}> = ({
    openShow, handleCallBack, objData
}) => {
        const [listData, setListData] = useState<IEmptyDetailType[]>([]);
        const [form] = Form.useForm();
        const [disable, setDisable] = useState(false);//是否禁用空车重量
        const [visible, setVisible] = useState(false); //是否展开table
        const handleOk = async() => {
            const values = await form.validateFields()
            const { code, msg } = (await getUpdateEmpty({ ...values, id: objData?.id })) as {
                code: number
                msg: string
            }
            if (code === 20000) {
                message.success('修改成功')
                handleCallBack()
            } else {
                message.error(msg)
            }
            setVisible(false)
            setDisable(false)
        }
        const handleCancel = () => {
            handleCallBack()
            setDisable(false)
            setVisible(false)
            form.resetFields()
        }

        const listFun = useCallback(async () => {
            //getEmptyDetail
            if (objData?.id) {
                const { code, msg, data } = (await getEmptyDetail({ id: objData.id })) as {
                    code: number
                    msg: string
                    data: {
                        emptyRecords: IEmptyDetailType[]
                        emptyWeight: number
                        reason: string
                    }
                }
                if (code === 20000) {
                    setListData(data.emptyRecords)
                    if (data.emptyWeight) {
                        form.setFieldsValue({
                            emptyWeight: data.emptyWeight,
                            reason: data.reason
                        })
                    }else{
                        form.setFieldsValue({
                            reason: data.reason
                        })
                        setDisable(true)
                    }
                } else {
                    message.error(msg)
                }
            }
        }, [objData, form])

        useEffect(() => {
            listFun()
        }, [listFun])

        const columns: ColumnsType<IEmptyDetailType> = [
            {
                title: "序号",
                align: "center",
                render: (text, record, index) => <span>{index + 1}</span>
            },
            {
                title: "修改前重量",
                align: "center",
                dataIndex: "beforeWeight",
            },
            {
                title: "修改后重量",
                align: "center",
                dataIndex: "behindWeight",
            },
            {
                title: "原因",
                align: "center",
                dataIndex: "reason",
            },
            {
                title: "修改时间",
                align: "center",
                dataIndex: "updateRecordTime",
            },
        ]

        return (
            <Modal
                width={useWindowFontSize(594)}
                title={"修改空车重量"}
                open={openShow}
                onOk={handleOk}
                onCancel={handleCancel}
                getContainer={false}
                okText="确认"
                cancelText="取消"
            >
                <Form form={form}
                    labelCol={{ span: 7 }}
                    wrapperCol={{ span: 16 }}
                    labelAlign="right"
                >
                    <Form.Item
                        label="空车重量(kg)"
                        name="emptyWeight"
                        rules={[{ required: true, message: "请输入空车重量!" },
                            //最大长度不能超过8位
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (value < 0 || value > 99999999) {
                                        return Promise.reject("重量不合适，请重新输入");
                                    }
                                    return Promise.resolve();
                                },
                            }),
                        ]}

                    >
                        <Input
                            disabled={disable}
                            type="number"
                            placeholder="请输入空车重量"
                        />
                    </Form.Item>
                    <Form.Item
                        label="修改原因"
                        name="reason"
                    >
                        <Input
                            style={{ width: '100%' }}
                            placeholder="请输入修改原因"
                        />
                    </Form.Item>
                </Form>
                <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center' ,fontSize:'1.4rem',color:'#999999',cursor:'pointer'}}
                    onClick={() => setVisible(!visible)}
                    >
                    <div style={{ marginRight: '1rem' }}>修改记录</div>
                    {!visible?<DownOutlined />:<UpOutlined />}
                </div>
                
                <ConfigProvider
                    theme={{
                        components: {
                            Table: {
                                headerColor: "#999999",
                                fontSize: useWindowFontSize(12),
                            },
                        },
                    }}
                >
                    {
                        visible&&<Table
                                    columns={columns}
                                    dataSource={listData}
                                    pagination={false}
                                    rowKey="pickId"
                                />
                    }
                </ConfigProvider>

            </Modal>
        )
    }

export default ChangeWeight